<template>
	<view style="height: 100vh;">
		<scroll-view id="tab" scroll-x="true">
			<view v-for="(item,index) in barNameList" :key="item.id" class="tabName" :data-current="index" @click="ontabtap">

          <text class="tabName_text" :class="tabIndex == index?'active_text':''">{{item.name}}</text>


			</view>
		</scroll-view>
		<swiper id="tabContent" :current="tabIndex" @change="tabChange">
			<swiper-item  :key="0">
          <ul>
            <li v-for="(item,index) in Bcla" @click="click(item.ClaId)">
              <image :src="Nimg[index]"></image>
              {{item.ClaName}}
            </li>
          </ul>
			</swiper-item>
      <swiper-item  :key="1">
          <ul>
            <li v-for="(item,index) in Gcla" @click="click(iitem.ClaId)">
              <image :src="Gimg[index]"></image>
              {{item.ClaName}}
            </li>
          </ul>
      </swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabIndex:0,
        Bcla:[],
        Gcla:[],
				barNameList:[{
				    name: '男频',
				    id: '0'
				}, {
				    name: '女频',
				    id: '1'
				}],
				barContentList:[],
        Nimg:['../../static/icon/b/xuanhuan.png','../../static/icon/b/Qihuan.png','../../static/icon/b/Wuxia.png',
        '../../static/icon/b/Xianxia.png','../../static/icon/b/Dushi.png','../../static/icon/b/Xianshi.png','../../static/icon/b/Junshi.png',
        '../../static/icon/b/Lishi.png','../../static/icon/b/Youxi.png','../../static/icon/b/Tiyu.png',
        '../../static/icon/b/Kehuan.png','../../static/icon/b/xuanyi.png','../../static/icon/b/Qingxiaoshuo.png'],
        Gimg:['../../static/icon/g/Gudai.png','../../static/icon/g/Xianxia.png','../../static/icon/g/Xiandai.png',
        '../../static/icon/g/Lanman.png','../../static/icon/g/Xuanhuan.png','../../static/icon/g/Tuili.png',
        '../../static/icon/g/Kehuan.png','../../static/icon/g/Youxi.png','../../static/icon/g/Qingxiaos.png',
        '../../static/icon/g/Duanpian.png',]
			}
		},
		methods:{
			onLoad() {
        this.selectBoyCit()
			    setTimeout(()=>{
			      this.barNameList.forEach((tabBar) => {
			          this.barContentList.push({
			              data: [],
			              isLoading: false,
			              refreshText: "",
			              loadingText: '加载更多...',
			          });
			      });
				  this.getList(0); // 默认初始获取第一个选项对应的数据
			    },350)
			},
			// 获取列表数据
			getList(index){
				let activeTab = this.barContentList[index];
				let list = [];
				// ......
				// 这里请求接口--> 获取数据返回值data--> list.push(data);
				// ......
				activeTab.data = activeTab.data.concat(list);
			},
			// swiper滑动时改变下标
			tabChange(e){
				let index = e.target.current || e.detail.current;  // 获取到当前移动到第几个
				this.switchTab(index);
			},
			// scroll-view 点击 tab 时 改变下标
			ontabtap(e){
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			switchTab(index){
				if(this.tabIndex == index){
					return
				}
				// 先清空前面访问的swiper的缓存，要不再次切换到之前访问过的tab的时候内容会显示多次
				this.barContentList[this.tabIndex].data = [];
				// 后赋值
				this.getList(index);
				this.tabIndex = index;
			},
      selectBoyCit(){
        console.log("hello")
        uni.request({
        	url:'http://z7jxxt5.nat.ipyingshe.com/select/classification',
        	method:'POST',
        	data:{
            id:1
        	},
        	success:(res)=>{
            this.Bcla=res.data.classification
            console.log(this.Bcla)
        	},
        })
        uni.request({
        	url:'http://z7jxxt5.nat.ipyingshe.com/select/classification',
        	method:'POST',
        	data:{
            id:2
        	},
        	success:(res)=>{
            this.Gcla=res.data.classification
            console.log(this.Gcla)
        	},
        })
      },
      click(claid){
        uni.navigateTo({
          url:"../blank/blank?claid="+claid
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	#tab{
		width: 100%;
		display: flex;
	}
	.tabName{
		text-align: center;
		width: 50%;
		display: inline-block;
		height: 80rpx;
		line-height: 80rpx;
		white-space: nowrap;
	}
	.tabName_text{
		width: 100%;
		height: 100%;
    font-size: 14px;
	}
	.active_text{
    border-bottom: 2px #F5222D solid;
    color: red;
    padding-bottom: 6px;
  }
	#tabContent{
		width: 100%;
    height: 90%;
	}
  li{
    width: 35vw;
    height: 4vh;
    line-height: 3.8vh;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 10px;
    float: left;
    margin-left: 10vw;
    text-align: right;
    padding-right: 5vw;
    box-sizing: border-box;
    margin-top: 4vh;
    font-size: 13px;
    letter-spacing: 3px;
  }
  image{
    width: 20px;
    height: 20px;
    float: left;
    margin-top: 4px;
    margin-left: 2vw;
  }
</style>
